<a href='https://github.com/angular/angular.js/edit/v1.6.x/src/ng/directive/form.js?message=docs(form.FormController)%3A%20describe%20your%20change...#L21' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.6.9/src/ng/directive/form.js#L21' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">form.FormController</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - type in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>





<div class="api-profile-description">
  <h2 id="overview">Overview</h2>
  <p><code>FormController</code> keeps track of all its controls and nested forms as well as the state of them,
such as being valid/invalid or dirty/pristine.</p>
<p>Each <a href="api/ng/directive/form">form</a> directive creates an instance
of <code>FormController</code>.</p>

</div>




<div>
  

  

  

  
<h2 id="form.FormController-methods">Methods</h2>
<ul class="methods">
  <li>
    <h3 id="$rollbackViewValue"><p><code>$rollbackViewValue();</code></p>

</h3>
    <div><p>Rollback all form controls pending updates to the <code>$modelValue</code>.</p>
<p>Updates may be pending by a debounced event or because the input is waiting for a some future
event defined in <code>ng-model-options</code>. This method is typically needed by the reset button of
a form that uses <code>ng-model-options</code> to pend updates.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$commitViewValue"><p><code>$commitViewValue();</code></p>

</h3>
    <div><p>Commit all form controls pending updates to the <code>$modelValue</code>.</p>
<p>Updates may be pending by a debounced event or because the input is waiting for a some future
event defined in <code>ng-model-options</code>. This method is rarely needed as <code>NgModelController</code>
usually handles calling this in response to input events.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$addControl"><p><code>$addControl(control);</code></p>

</h3>
    <div><p>Register a control with the form. Input elements using ngModelController do this automatically
when they are linked.</p>
<p>Note that the current state of the control will not be reflected on the new parent form. This
is not an issue with normal use, as freshly compiled and linked controls are in a <code>$pristine</code>
state.</p>
<p>However, if the method is used programmatically, for example by adding dynamically created controls,
or controls that have been previously removed without destroying their corresponding DOM element,
it&#39;s the developers responsibility to make sure the current state propagates to the parent form.</p>
<p>For example, if an input control is added that is already <code>$dirty</code> and has <code>$error</code> properties,
calling <code>$setDirty()</code> and <code>$validate()</code> afterwards will propagate the state to the parent form.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        control
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>control object, either a <a href="api/ng/type/form.FormController"><code>form.FormController</code></a> or an
<a href="api/ng/type/ngModel.NgModelController"><code>ngModel.NgModelController</code></a></p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    </li>
  
  <li>
    <h3 id="$removeControl"><p><code>$removeControl(control);</code></p>

</h3>
    <div><p>Deregister a control from the form.</p>
<p>Input elements using ngModelController do this automatically when they are destroyed.</p>
<p>Note that only the removed control&#39;s validation state (<code>$errors</code>etc.) will be removed from the
form. <code>$dirty</code>, <code>$submitted</code> states will not be changed, because the expected behavior can be
different from case to case. For example, removing the only <code>$dirty</code> control from a form may or
may not mean that the form is still <code>$dirty</code>.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        control
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>control object, either a <a href="api/ng/type/form.FormController"><code>form.FormController</code></a> or an
<a href="api/ng/type/ngModel.NgModelController"><code>ngModel.NgModelController</code></a></p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    </li>
  
  <li>
    <h3 id="$setDirty"><p><code>$setDirty();</code></p>

</h3>
    <div><p>Sets the form to a dirty state.</p>
<p>This method can be called to add the &#39;ng-dirty&#39; class and set the form to a dirty
state (ng-dirty class). This method will also propagate to parent forms.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$setPristine"><p><code>$setPristine();</code></p>

</h3>
    <div><p>Sets the form to its pristine state.</p>
<p>This method sets the form&#39;s <code>$pristine</code> state to true, the <code>$dirty</code> state to false, removes
the <code>ng-dirty</code> class and adds the <code>ng-pristine</code> class. Additionally, it sets the <code>$submitted</code>
state to false.</p>
<p>This method will also propagate to all the controls contained in this form.</p>
<p>Setting a form back to a pristine state is often useful when we want to &#39;reuse&#39; a form after
saving or resetting it.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$setUntouched"><p><code>$setUntouched();</code></p>

</h3>
    <div><p>Sets the form to its untouched state.</p>
<p>This method can be called to remove the &#39;ng-touched&#39; class and set the form controls to their
untouched state (ng-untouched class).</p>
<p>Setting a form controls back to their untouched state is often useful when setting the form
back to its pristine state.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$setSubmitted"><p><code>$setSubmitted();</code></p>

</h3>
    <div><p>Sets the form to its submitted state.</p>
</div>

    

    

    

    </li>
  
  <li>
    <h3 id="$setValidity"><p><code>$setValidity(validationErrorKey, isValid, controller);</code></p>

</h3>
    <div><p>Change the validity state of the form, and notify the parent form (if any).</p>
<p>Application developers will rarely need to call this method directly. It is used internally, by
<a href="api/ng/type/ngModel.NgModelController#$setValidity">NgModelController.$setValidity()</a>, to propagate a
control&#39;s validity state to the parent <code>FormController</code>.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        validationErrorKey
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Name of the validator. The <code>validationErrorKey</code> will be
       assigned to either <code>$error[validationErrorKey]</code> or <code>$pending[validationErrorKey]</code> (for
       unfulfilled <code>$asyncValidators</code>), so that it is available for data-binding. The
       <code>validationErrorKey</code> should be in camelCase and will get converted into dash-case for
       class name. Example: <code>myError</code> will result in <code>ng-valid-my-error</code> and
       <code>ng-invalid-my-error</code> classes and can be bound to as <code>{{ someForm.$error.myError }}</code>.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        isValid
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>Whether the current state is valid (true), invalid (false), pending
       (undefined),  or skipped (null). Pending is used for unfulfilled <code>$asyncValidators</code>.
       Skipped is used by AngularJS when validators do not run because of parse errors and when
       <code>$asyncValidators</code> do not run because any of the <code>$validators</code> failed.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        controller
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-ngmodelcontroller">NgModelController</a><a href="" class="label type-hint type-hint-formcontroller">FormController</a>
      </td>
      <td>
        <p>The controller whose validity state is
       triggering the change.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    </li>
  </ul>
  
  
<h2 id="form.FormController-properties">Properties</h2>
<ul class="properties">
  <li>
    <h3 id="$pristine"><code>$pristine</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>True if user has not interacted with the form yet.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$dirty"><code>$dirty</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>True if user has already interacted with the form.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$valid"><code>$valid</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>True if all of the containing forms and controls are valid.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$invalid"><code>$invalid</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>True if at least one containing control or form is invalid.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$submitted"><code>$submitted</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>True if user has submitted the form even if its invalid.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$pending"><code>$pending</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>An object hash, containing references to controls or forms with
 pending validators, where:</p>
<ul>
<li>keys are validations tokens (error names).</li>
<li>values are arrays of controls or forms that have a pending validator for the given error name.</li>
</ul>
<p>See <a href="api/ng/type/form.FormController#$error">$error</a> for a list of built-in validation tokens.</p>
</td>
  </tr>
</table>
    
  </li>
  
  <li>
    <h3 id="$error"><code>$error</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">Object</a></td>
    <td><p>An object hash, containing references to controls or forms with failing
 validators, where:</p>
<ul>
<li>keys are validation tokens (error names),</li>
<li><p>values are arrays of controls or forms that have a failing validator for the given error name.</p>
<p>Built-in validation tokens:</p>
</li>
<li><code>email</code></li>
<li><code>max</code></li>
<li><code>maxlength</code></li>
<li><code>min</code></li>
<li><code>minlength</code></li>
<li><code>number</code></li>
<li><code>pattern</code></li>
<li><code>required</code></li>
<li><code>url</code></li>
<li><code>date</code></li>
<li><code>datetimelocal</code></li>
<li><code>time</code></li>
<li><code>week</code></li>
<li><code>month</code></li>
</ul>
</td>
  </tr>
</table>
    
  </li>
  </ul>



  
</div>


